<template>
  <div class="number_box">
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
      <el-form-item label="被叫号码" prop="callee">
        <el-input
          size="small"
          v-model="queryParams.callee"
          placeholder="请输入呼叫号码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-200px"
        />
      </el-form-item>
      <el-form-item label="呼叫结果">
        <el-select
          size="small"
          v-model="queryParams.resultType"
          placeholder="请选择状态"
          clearable
          @change="handleQuery"
          class="!w-200px"
        >
          <el-option label="呼叫成功" value="1" />
          <el-option label="播放语音时挂断" value="10" />
          <el-option label="播放语音完挂断" value="11" />
          <el-option label="系统线路异常" value="90" />
          <el-option label="黑名单或拦截" value="91" />
          <el-option label="空号或号码错误" value="92" />
          <el-option label="客户拒接或挂断" value="93" />
          <el-option label="客户忙或未接听" value="94" />
          <el-option label="坐席忙线未接听" value="95" />
          <el-option label="呼叫失败" value="99" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary" size="small">
          <Icon icon="ep:search" class="mr-5px" />
          搜索
        </el-button>
        <el-button @click="resetQuery" size="small">
          <Icon icon="ep:refresh" class="mr-5px" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table
        @sort-change="sortChange"
        v-loading="loading"
        :data="list"
        border
        :stripe="true"
        height="100%"
        :header-cell-style="{ background: '#f0f0f0' }"
      >
        <el-table-column
          label="话单状态"
          align="center"
          prop="resultType"
          width="140"
          :sortable="true"
        >
          <template #default="scope">
            <div class="flex justify-center flex-col">
              <el-tag v-if="scope.row.resultCode == 'success'" type="success">成功</el-tag>
              <el-tag v-else-if="scope.row.resultCode == 'leak'" type="warning">漏接</el-tag>
              <el-tag v-else-if="scope.row.resultCode == 'fail'" type="danger">失败</el-tag>
              <el-tag v-else-if="scope.row.resultCode == 'illegal'" type="info">错误</el-tag>
              <span class="text-#333 text-13px">{{ resultTypeMap[scope.row.resultType] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="被叫"
          prop="callee"
          align="center"
          width="128px"
          show-overflow-tooltip
          :sortable="true"
        >
          <template #default="scope">
            <div class="text-12px">
              {{ scope.row.encryptCallee }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="Ai意向度"
          prop="summary"
          width="120"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="客户意向度"
          prop="levelName"
          width="120"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="应答时间"
          align="center"
          prop="startTime"
          :sortable="true"
          show-overflow-tooltip
          :formatter="dateFormatter"
        />
        <el-table-column
          label="挂断时间"
          :sortable="true"
          prop="endTime"
          align="center"
          show-overflow-tooltip
          :formatter="dateFormatter"
        />
        <el-table-column
          :sortable="true"
          label="时长"
          align="center"
          prop="callSecond"
          show-overflow-tooltip
          width="140"
        >
          <template #default="scope">
            <div class="text-12px">
              通话: {{ scope.row.callSecond }} 秒; 计费: {{ scope.row.callMinute }} 分
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140px" fixed="right" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openDetail(scope.row)"
              style="background: #fff; border: none"
            >
              详情
            </el-button>
            <el-button
              link
              type="primary"
              @click="downloadAudio(scope.row)"
              :disabled="!scope.row.recordUrl"
            >
              下载录音
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <!-- 呼叫详情 -->
  <DetailDes ref="detailRef" />
</template>

<script setup>
import { dateFormatter } from '@/utils/formatTime'
import { RecordApi } from '@/api/call/record'
import DetailDes from '@/views/call/ivr_record/compoents/detail.vue'

const list = ref([])
const total = ref(0)
const props = defineProps({
  activeItem: Object
})

const queryParams = reactive({
  pageNo: 1,
  pageSize: 8,
  taskId: null,
  resultType: undefined,
  callee: undefined,
  sortStr: '',
  sortFields: {}
})
const resultTypeMap = {
  1: '呼叫成功',
  10: '播放语音时挂断',
  11: '播放语音完挂断',
  90: '系统线路异常',
  91: '黑名单或拦截',
  92: '空号或号码错误',
  93: '客户拒接或挂断',
  94: '客户忙或未接听',
  95: '坐席忙线未接听',
  99: '呼叫失败'
}
/*下载录音*/
const downloadAudio = (row) => {
  if (row.recordUrl) {
    const link = document.createElement('a')
    link.href = row.recordUrl
    link.setAttribute('download', 'recording.mp4')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}
/** 打开详情*/
const detailRef = ref()
const openDetail = (item) => {
  detailRef.value.open(item.id, item.reqNo)
}
const loading = ref(false)
const getList = async () => {
  loading.value = true
  try {
    if (Object.keys(queryParams.sortFields).length > 0) {
      queryParams.sortStr = JSON.stringify(queryParams.sortFields)
    }
    const data = await RecordApi.getIvrRecordPage(queryParams)
    total.value = data.total
    list.value = data.list
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
const sortChange = (column) => {
  queryParams.sortFields[column.prop] = column.order == 'descending' ? 'desc' : 'asc'
  handleQuery()
}
const queryFormRef = ref(null)
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.resultType = ''
  queryParams.callee = ''
  queryParams.sortFields = {}
  queryParams.sortStr = ''
  handleQuery()
}
watch(
  () => props.activeItem,
  (val) => {
    if (val) {
      queryParams.taskId = val.taskId
      getList()
    }
  },
  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.number_box {
  height: calc(100% - 16px);
  padding-top: 16px;
}
.number_box {
  overflow-y: auto;
}
.table_box {
  height: calc(100% - 128px);
}
.el-form-item__label {
  font-size: 12px;
}
</style>
